Menú efecto Mouseover con CSS

Hasta no hace mucho yo pensaba que para añadir el efecto Mouseover era necesario hacerlo con javascript, pero he descubierto que también puede hacerse con CSS.
En xyberneticos he visto un menú de vikiworks que me ha gustado mucho, es un sencillo texto con una segunda línea donde podemos añadir una breve descripción.

Lo podemos aplicar a nuestro blog añadiendo unas líneas en los CSS que podrán ser modificadas respecto a color. Nos situamos en nuestra plantilla edición de HTML, justo antes de ]]></b:skin> añadimos lo siguiente:

#menu {margin:0;padding:0; }
#menu ul { margin:0;padding:0; }
#menu ul li { display:block;padding:0; float:left;text-align:left;margin-right:2em; }
#menu li a { color:#fff;font:bold 14px georgia;text-decoration:none;line-height: 1.3em; display:block; }
#menu li a:hover { color:#ffc300; }
#menu li span { font:11px arial; color:#666; margin:0; }
#menu li span:hover {color:#999;}

Luego añadimos un elemento de página y en HTML/Javascript agregamos:

<div id="menu"><ul>
<li><a href="#">Menu01<br /><span>Short desc</span></a></li>
<li><a href="#">Menu02<br /><span>Short desc</span></a></li>
<li><a href="#">Menu03<br /><span>Short desc</span></a></li>
</ul></div>

Donde Menu01-Menu02-Menu03 es el texto que visionamos y hace las veces de enlace.
El arterisco ( # ) lo sustituimos por la url de la página que vamos a enlazar.
"Short desc" es el subtitulo, texto o breve descripción que podemos añadir, de no desearlo lo suprimimos.